<template>

    <el-drawer
            :title="defaultValue.title"
            :visible="tableConfig.show"
            :close-on-press-escape="tableConfig.closeOnPressEscape"
            :append-to-body="tableConfig.appendToBody"
            :direction="tableConfig.direction"
            :modal="tableConfig.modal"
            :size="tableConfig.size"
            :modal-append-to-body="tableConfig.modalAppendToBody"
            @close="tableConfig.show = false"
            :show-close="tableConfig.showClose"
            :destroy-on-close="tableConfig.destroyOnClose"
            width="1100px">


        <el-tabs v-model="elTab.activeName" type="card" style="margin: 10px" @tab-click="handleTabClick">

          <el-tab-pane label="基础" name="home">
            <el-row :gutter="0" style="display: flex">
              <el-col :span="3" >
                <div class="imgBox">
                  <el-image class="icoHeadUserImage" fit="contain" :src="obj.icoUrl || require('@/assets/images/ico/app.png')" />
                </div>
              </el-col>
              <el-col :span="21">
                <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>

                  <el-descriptions-item label="组件名称">{{obj.name}}</el-descriptions-item>
                  <el-descriptions-item label="产品名称">{{obj.productName}}</el-descriptions-item>
                  <el-descriptions-item label="部署类型"><el-tag size="mini">组件</el-tag></el-descriptions-item>

                  <el-descriptions-item label="版本类型">
                    <el-tag type="danger" size="mini" v-if="obj.opsComponentVersion.type === 1">主版本</el-tag>
                    <el-tag size="mini" v-else-if="obj.opsComponentVersion.type === 2">普通版本</el-tag>
                    <el-tag type="info" size="mini" v-else-if="obj.opsComponentVersion.type === 3">禁用版本</el-tag>
                  </el-descriptions-item>

                  <el-descriptions-item label="环境名称">{{obj.opsDeploy.envName}}</el-descriptions-item>
                  <el-descriptions-item label="环境类型">
                    <el-tag type="warning" size="mini" v-if="obj.opsDeploy.type === 1">演示环境</el-tag>
                    <el-tag size="mini" v-if="obj.opsDeploy.type === 2">开发环境</el-tag>
                    <el-tag type="danger" size="mini" v-if="obj.opsDeploy.type === 3">生产环境</el-tag>
                    <el-tag type="success" size="mini" v-if="obj.opsDeploy.type === 4">测试环境</el-tag>
                    <el-tag class="bg1" size="mini" v-if="obj.opsDeploy.type === 5">预发布环境</el-tag>
                    <el-tag type="info" size="mini" v-if="obj.opsDeploy.type === 99">其他环境</el-tag>
                  </el-descriptions-item>

                  <el-descriptions-item label="组件版本">v.{{obj.opsComponentVersion.version}}</el-descriptions-item>
                  <el-descriptions-item label="组件类型说明">{{obj.opsComponentVersion.reason}}</el-descriptions-item>

                </el-descriptions>
              </el-col>
            </el-row>

            <el-row style="">
              <el-col :span="24">
                <el-descriptions title="" :column="1" :size="size" :contentStyle="CS" :label-style="LS" border >
                  <el-descriptions-item label="部署人">{{obj.opsDeploy.deployUser}}</el-descriptions-item>
                  <el-descriptions-item label="部署时间">{{obj.opsDeploy.deployTime}}</el-descriptions-item>
                  <el-descriptions-item label="创建时间">{{obj.opsDeploy.createTime}}</el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-row>

            <el-row style="">
              <el-col :span="24">
                <el-descriptions title="" :column="1" :size="size" :contentStyle="CS" :label-style="LS" border >

                  <el-descriptions-item label="网络端口">{{obj.opsDeploy.ports}}</el-descriptions-item>
                  <el-descriptions-item label="组件官网">{{obj.officialWebUrl}}</el-descriptions-item>
                  <el-descriptions-item label="部署基础位置">{{obj.opsDeploy.basePath}}</el-descriptions-item>
                  <el-descriptions-item label="备份目录">{{obj.opsDeploy.bakPath}}</el-descriptions-item>

                  <!--应用信息-->
                  <el-descriptions-item label="基础表结构路径">{{obj.tableUrl}}</el-descriptions-item>
                  <el-descriptions-item label="项目的仓库地址">{{obj.git}}</el-descriptions-item>
                  <el-descriptions-item label="下载地址">{{obj.opsComponentVersion.downUrl}}</el-descriptions-item>
                  <el-descriptions-item label="组件简介">{{obj.briefIntroduction}}</el-descriptions-item>
                  <el-descriptions-item label="版本简介">{{obj.opsComponentVersion.briefIntroduction}}</el-descriptions-item>

                </el-descriptions>
              </el-col>
            </el-row>

            <!--<el-row>-->
            <!--  <el-col :span="24">-->
            <!--    <el-descriptions title="" :column="1" :size="size" :contentStyle="CS" :label-style="LS" border >-->
            <!--      &lt;!&ndash;<el-descriptions-item label="基础打包方式">{{obj.packMethodDoc}}</el-descriptions-item>&ndash;&gt;-->
            <!--    </el-descriptions>-->
            <!--  </el-col>-->
            <!--</el-row>-->


          </el-tab-pane>


          <el-tab-pane label="启动和关闭" name="startEnd">
            <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
              <el-divider content-position="left"><span style="color: coral">部署启动&关闭</span></el-divider>
              <!--md预览展示-->
              <mavon-editor v-model="obj.opsDeploy.startEnd" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="部署过程" name="deployProcess">
            <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
              <el-divider content-position="left"><span style="color: coral">部署过程</span></el-divider>
              <!--md预览展示-->
              <mavon-editor v-model="obj.opsDeploy.deployProcess" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="验证方式" name="verification">
            <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
              <el-divider content-position="left"><span style="color: coral">部署验证方式</span></el-divider>
              <!--md预览展示-->
              <mavon-editor v-model="obj.opsDeploy.verification" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="组件安装文档" name="installDoc">
            <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
              <el-divider content-position="left"><span style="color: coral">应用安装文档</span></el-divider>
              <!--md预览展示-->
              <mavon-editor v-model="obj.opsComponentVersion.installDoc" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="组件启动" name="start">
            <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
              <el-divider content-position="left"><span style="color: coral">组件启动</span></el-divider>
              <!--md预览展示-->
              <mavon-editor v-model="obj.opsComponentVersion.start" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
            </div>
          </el-tab-pane>

          <el-tab-pane label="组件停止" name="stop">
            <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
              <el-divider content-position="left"><span style="color: coral">组件停止</span></el-divider>
              <!--md预览展示-->
              <mavon-editor v-model="obj.opsComponentVersion.stop" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
            </div>
          </el-tab-pane>


        </el-tabs>



        <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
        </span>

    </el-drawer>

</template>

<script>

import {getFullDate, getFullTime} from "@/utils/utils";
import http from '@/utils/http'

export default {
  name: "OpsDeployComponentDetailed",
  data(){
    return {
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '详情',
      },
      // 标签页信息
      elTab:{
        // 被选中的标签
        activeName: 'home',
      },
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Drawer  中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否需要遮罩层
        modal: true,
        // 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上
        modalAppendToBody: true,
        // Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true
        appendToBody: false,
        // 是否可以通过按下 ESC 关闭 Drawer
        closeOnPressEscape: true,
        // 打开方向
        direction: 'rtl',
        // 是否显示关闭按钮
        showClose: true,
        // Drawer 窗体的大小
        size: '80%',
      },
      // 列表的尺寸
      size: 'small',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 展示的数据
      obj: {
        id: null,
        siteId: null,
        computerServerId: null,
        basePath: null,
        startEnd: null,
        deployProcess: null,
        verification: null,
        ports: null,
        deployUser: null,
        deployTime: null,
        bakPath: null,
        type: null,
        tag: null,
        appBranchId: null,
        appId: null,
        componentVersionId: null,
        componentId: null,
        updateTime: null,
        updateId: null,
        createTime: null,
        createId: null,
        delType: null,
        opsDeploy: {
          productName: '',
          envName: '',
        },
        opsComponentVersion: {

        },
      },
      // 描述列表的css
      CS: {
        // 'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 描述列表的css
      LS: {
        // 'color': '#000',
        // 'text-align': 'center',
        'font-weight': '600',
        // 'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
    }
  },
  methods: {
    /**
     * 渲染图片
     * 只能这样做，图片这里不支持非固定地址返回
     * @param item 目标数据
     */
    getImageUrlInfo(item) {
      if (!item || !item.ico || item.ico === 'null') {
        // 判空或无效，直接显示默认图
        this.$set(item, 'icoUrl', null);
        return;
      }

      http.getImageUrl(item.ico)
        .then(url => {
          // 异步赋值，触发响应式更新
          this.$set(item, 'icoUrl', url);
        })
        .catch(() => {
          // 下载失败 fallback 默认图
          this.$set(item, 'icoUrl', null);
        });
    },
    /**
     * 标签页被点击的时候
     * @param tab
     * @param event
     */
    handleTabClick(tab, event){
      console.log(this.elTab.activeName)
    },
    /**
     * 打开弹出框
     * @param obj 人员信息
     */
    init(obj){
      this.obj = obj
      if (this.obj == null || this.obj.opsDeploy == null){
        this.obj = {
          opsDeploy: {
            productName: '',
            envName: '',
          },
          opsComponentVersion: {

          },
        }
      }
      this.getImageUrlInfo(obj)
      this.tableConfig.show = true
    },
    /**
     * 转换时间戳为时间格式
     */
    getTime(item){
      return getFullTime(item)
    },
    /**
     * 时间转日期
     * @param item 要转换的时间戳
     * @return {string}
     */
    getFullDate(item){
      return getFullDate(item)
    },
  },
}
</script>

<style scoped>


.imgBox {
  border: 1px solid #ebeef5;
  /*左边框样式，这里设置为无*/
  border-right: none;
  width: 100%;
  height: 100%;
  /*相对定位*/
  position: relative;
}


/*头像的样式*/
.imgBox .icoHeadUserImage{
  width: 120px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  max-height: 100%;
  margin-left: -65px;
  padding: 5px;
}

</style>


